<template>
  <el-dialog
    custom-class="dialog-box"
    title="预览"
    :visible.sync="dialogVisible"
    width="900px"
  >
    <el-row>
      <el-col :span="6"
        >【题型】：
        {{
          dialogData.questionType == "1"
            ? "单选"
            : dialogData.questionType == "2"
            ? "多选"
            : "简答"
        }}
      </el-col>
      <el-col :span="6">【编号】：{{ dialogData.id }}</el-col>
      <el-col :span="6"
        >【难度】：
        {{
          dialogData.difficulty === "1"
            ? "简单"
            : dialogData.questionType === "2"
            ? "一般"
            : "困难"
        }}
      </el-col>
      <el-col :span="6">【标签】：{{ dialogData.tags }}</el-col>
      <el-col :span="6">【学科】：{{ dialogData.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ dialogData.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ dialogData.direction }}</el-col>
    </el-row>
    <el-divider></el-divider>
    【题干】：
    <div class="question" v-html="dialogData.question"></div>
    <div class="question-content">
      <!-- 多选题 -->
      <div v-if="dialogData.questionType == '2'">
        <div style="margin-bottom: 10px">
          多选题 选项：（以下选中的选项为正确答案）
        </div>
        <!-- 
          多选框: label 属性用于多选框组(只有在多选框组的时候生效)
          即每一个选中的多选框label属性的值，都会添加到 v-model 绑定的数组中
          普通用法: v-model 绑定一个布尔值
        -->
        <div
          v-for="(item, i) in dialogData.options"
          :key="i"
          style="margin-bottom: 6px"
        >
          <el-checkbox
             @click.native="disabledFun($event.target)"
            :checked="!!item.isRight"
            >{{ item.code }}</el-checkbox
          >
        </div>
      </div>
      <!-- 单选题 -->
      <div v-else-if="dialogData.questionType == '1'">
        <div style="margin-bottom: 10px">
          单选题 选项：（以下选中的选项为正确答案）
        </div>
        <!-- 
        单选框: 使用 label 来指定 与 v-model 相比较的值
                若与 v-model 相同 则选中，反之没选中
       -->
        <div
          v-for="(item, i) in dialogData.options"
          :key="i"
          style="margin-bottom: 6px"
        >
          <el-radio 
            @click.native="disabledFun($event.target)" 
            v-model="item.isRight" 
            :label="1">
            {{ item.code }}
          </el-radio>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="video">
      <div class="video-tit">
        <span>【参考答案】：</span>
        <el-button type="danger" size="small" @click="showVideo = true"
          >视频答案预览</el-button
        >
      </div>
      <div class="video-content" v-if="showVideo">
        <video
          :src="dialogData.videoURL"
          controls="controls"
          width="400px"
          height="300px"
        >
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row
      ><el-col
        >【答案解析】:
        <div class="answer-box" v-html="dialogData.answer"></div></el-col
    ></el-row>
    <el-divider></el-divider>
    <el-row
      ><el-col>【题目备注】：{{ dialogData.remarks }}</el-col></el-row
    >
    <el-divider></el-divider>
    <span slot="footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/hmmm/questions";
export default {
  data() {
    return {
      radioIsRight: 1,
      dialogData: {},
      showVideo: false,
      dialogVisible: false,
    };
  },
  methods: {
    // 阻止修改选中状态
    disabledFun(obj){
      if(obj.type){
        obj.checked = !obj.checked
      }
    },
    // 获取 dialog 数据
    async openPreviewDialog(id) {
      this.dialogVisible = true;
      try {
        const { data: res } = await detail({ id });
        this.dialogData = res;
        console.log(res.options);
      } catch (err) {
        console.log(err);
        this.$message.error("啊哦, 获取题详情失败了..");
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.dialog-box {
  .el-dialog__body {
    .el-col {
      margin: 10px 0;
    }
    .el-divider {
      margin: 10px 0;
    }
    .question {
      color: blue;
      padding: 0 5px;
      margin: 10px 0;
    }
    .question-content,
    .question,
    .answer-box {
      padding: 0 5px;
    }
    .question-content {
     .el-checkbox {
        padding-top: 5px;
        .el-checkbox__inner:hover {
            border-color: #dcdfe6;
        }
      }
      .el-radio {
        .el-radio__inner:hover {
            border-color: #dcdfe6;
        }
      }
    }
    .video {
      .video-content {
        margin-top: 10px;
      }
    }
  }
  .el-dialog__footer {
    text-align: right;
  }
}
</style>